<script lang="ts">
    import { useFormItemContext } from "../FormItem/FormItem.svelte";
    import { Input } from "../Input";
    import Select from "../Select/Select.svelte";
    import { Space } from "../Space";
    let { value = $bindable([]), ...props } = $props();
    const { onFieldChange } = useFormItemContext();
    const val = $state({
        period: "",
        time: "",
    });

    const onValueChange = () => {
        if (val.period && val.time) {
            value = [val.period, val.time];
        } else {
            value = [];
        }
        onFieldChange();
    };
</script>

<Space>
    <Select
        bind:value={val.period}
        style="flex: 0 0 100px;"
        data={[
            { value: "1", label: "每日" },
            { value: "2", label: "每周" },
            { value: "3", label: "每月" },
        ]}
        clearable
        onchange={onValueChange}
    />
    <Input bind:value={val.time} onchange={onValueChange} clearable />
</Space>
